<template>
  <div>
	  <div style="display: inline-block;float: right;">
	    <el-button style='margin-left:15px;' :disabled="!isAuth('coupon:add')" size="mini" type="primary" icon="document" @click="addCoupon">添加优惠券</el-button>
      <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="refresh">刷新</el-button>
    </div>
	  	<el-table
	  	v-loading="tableDataLoading"
	  	  :data="tableData.content">
	  	  <el-table-column
	  		 prop="couponName"
	  		 label="优惠券名称"
				width="150">
	  	   </el-table-column>
			 <!-- <el-table-column
			   prop="type"
			   label="优惠券类型"
					width="100">
			   <template slot-scope="scope">
					<span  v-if="scope.row.type==1">通用券</span>
			   		<span style="color: #3E8EF7;" v-if="scope.row.type==2">商品券</span>
			   </template>
			</el-table-column> -->
	  		<el-table-column
	  		   prop="lessMoney"
	  		   label="优惠券面值">
	  		   </el-table-column>
    <!--    <el-table-column
	  		  prop="minMoney"
	  		  label="优惠券最低消费"
          width="150">
	  		</el-table-column> -->
			  <el-table-column
			   prop="validDay"
			   label="优惠券有效期限(天)">
			   </el-table-column>
	  		  <el-table-column
	  		   prop="sort"
	  		   label="排序">
	  		   </el-table-column>
			    <el-table-column
					label="状态">
            <template slot-scope="scope">
              <span style="color: #3E8EF7;" v-if="scope.row.status == 1">开启</span>
              <span v-if="scope.row.status == 2">关闭</span>
            </template>
			    </el-table-column>
	  		  <el-table-column
	  			prop="createTime"
	  			label="创建时间"
          width="160">
	  		  </el-table-column>
	  		  <el-table-column
	  		  label="操作"
	  			width="150">
	  		    <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                :disabled="!isAuth('coupon:issue')"
                @click="discuss(scope.$index,scope.row)">发布
              </el-button>
	  		      <el-button
	  		        size="mini"
	  		        type="primary"
                :disabled="!isAuth('coupon:update')"
	  		        @click="shopUpdates(scope.$index,scope.row)">修改
	  		      </el-button>
	  		      <!-- <el-button
	  		        size="mini"
	  		        type="danger"
                :disabled="!isAuth('coupon:delete')"
	  		        @click="shopdeletes(scope.row)">删除
	  		      </el-button> -->
	  		    </template>
	  		  </el-table-column>
	  	</el-table>
	  	<div style="text-align: center;margin-top: 10px;">
	  	  <el-pagination
	  	    @size-change="handleSizeChange"
	  	    @current-change="handleCurrentChange"
	  	    :page-sizes="[5, 10, 15, 20]"
	  	    :page-size="size"
	  	    :current-page="page"
	  	    layout="total,sizes, prev, pager, next"
	  	    :total="tableData.totalElements">
	  	  </el-pagination>
	  	</div>
      <!-- 添加优惠券-->
      <el-dialog title="添加优惠券" :visible.sync="dialogFormVisible" center>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">优惠券名称：</span>
          <el-input style="width:50%;" v-model="couponName" placeholder="请输入优惠券名称"></el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">优惠券面值：</span>
          <el-input style="width:50%;" v-model="lessMoney" type="number" :min="0" placeholder="请输入优惠券面值"></el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">优惠券有效期限(天)：</span>
          <el-input style="width:50%;" v-model="validDay" type="number" :min="1" placeholder="请输入优惠券最低消费"></el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">排序：</span>
          <el-input style="width:50%;" v-model="sort" type="number" :min="0" placeholder="请输入排序号"></el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">状态：</span>
          <el-radio-group v-model="status">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="2">关闭</el-radio>
          </el-radio-group>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="couponNoticeTo()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改优惠券 -->
      <el-dialog title="修改优惠券" :visible.sync="dialogFormVisible3" center>
      	<el-form :model="form">
          <el-form-item label="优惠券名称：" :label-width="formLabelWidth" >
            <el-input v-model="form.couponName" style="width:65%;" placeholder="请输入优惠券名称"></el-input>
          </el-form-item>
          <el-form-item label="优惠券面值：" :label-width="formLabelWidth" >
            <el-input v-model="form.lessMoney" style="width:65%;" placeholder="请输入优惠券面值"></el-input>
          </el-form-item>
          <el-form-item label="优惠券有效期限(天)：" :label-width="formLabelWidth" >
            <el-input v-model="form.validDay" style="width:65%;" placeholder="请输入优惠券有效期限(天)"></el-input>
          </el-form-item>
          <el-form-item label="排序：" :label-width="formLabelWidth" >
            <el-input v-model="form.sort" style="width:65%;" placeholder="请输入排序号"></el-input>
          </el-form-item>
          <el-form-item label="状态：" :label-width="formLabelWidth" >
            <el-radio-group v-model="form.status">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="2">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
      	</el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 发布优惠券-->
      <el-dialog title="发布优惠券" :visible.sync="dialogFormVisible2" center>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">优惠券ID：</span>
          <el-input style="width:50%;" v-model="couponId" disabled ></el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">优惠券名称：</span>
          <el-input style="width:50%;" v-model="couponName1" disabled ></el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">领取开启时间：</span>
          <el-date-picker
             style="width:200px;"
              v-model="startTime"
              align="right"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择开始时间"
              >
          </el-date-picker>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">券领结束时间：</span>
          <el-date-picker
             style="width:200px;"
              v-model="endTime"
              align="right"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择结束时间"
              >
          </el-date-picker>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">发布数量：</span>
          <el-input style="width:50%;" v-model="issueNumber" type="number" :min="0" placeholder="请输入发布数量"></el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">是否限量：</span>
          <el-radio-group v-model="isLimit">
              <el-radio :label="1">限量</el-radio>
              <el-radio :label="2">不限量</el-radio>
          </el-radio-group>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">状态：</span>
          <el-radio-group v-model="status">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="2">关闭</el-radio>
          </el-radio-group>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="discussNoticeTo()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 选择商品弹框 -->
      <el-dialog title="商品列表" customClass="customWidth"  :visible.sync="dialogFormVisible1" center>
        <div>
          <div style="margin:2% 0;display: inline-block;">
            <span>商品标题：</span>
            <el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入商品标题" v-model="title"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
          <div style="display: inline-block;">
            <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询</el-button>
            <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置</el-button>
          </div>
          	<el-table
          	v-loading="tableDataLoading"
          	  :data="shopData.content">
          	<el-table-column
          	 prop="id"
          	 label="编号"
          	 width="80">
          	 </el-table-column>
          	 <el-table-column
          		prop="coverImg"
          		label="商品图片">
          		<template slot-scope="scope">
          			<img :src="scope.row.coverImg" alt="" width="60" height="60">
          		</template>
          	  </el-table-column>
          	  <el-table-column
          		 prop="title"
          		 label="商品标题"
        		 width="200">
          	   </el-table-column>
        		  <el-table-column
        		   prop="originalPrice"
        		   label="商品原价">
        		   </el-table-column>
          		  <el-table-column
          		   prop="price"
          		   label="商品价格">
          		   </el-table-column>
          		 <el-table-column
          		  prop="memberPrice"
          		  label="会员价格">
          		  </el-table-column>
                <el-table-column
                label="操作"
                width="150">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="selectClick(scope.$index,scope.row)">选择
                    </el-button>
                  </template>
                </el-table-column>
          	</el-table>
          	<div style="text-align: center;margin-top: 10px;">
          	  <el-pagination
          	    @size-change="handleSizeChange1"
          	    @current-change="handleCurrentChange1"
          	    :page-sizes="[5, 10, 15, 20]"
          	    :page-size="size"
          	    :current-page="page"
          	    layout="total,sizes, prev, pager, next"
          	    :total="shopData.totalElements">
          	  </el-pagination>
          	</div>
        </div>
      </el-dialog>
  </div>
</template>

<script>
	export default {
	    data() {
	      return {
				size:10,
				page:1,
        type:1,
        title:'',
        typeId:'',
        couponName:'',
        lessMoney:0,
        minMoney:0,
        validDay:1,
        sort:0,
        status:1,
        goodsIds:'',
        goodsImages:'',
        issueNumber:0,
        remainNumber:'',
        isLimit:1,
        form:{
          couponId:'',
          type:'',
          couponName:'',
          lessMoney:'',
          goodsIds:'',
          goodsImages:'',
          minMoney:'',
          validDay:'',
          sort:'',
          status:'',
          createTime:''
        },
        coverImg:'',
        couponName1:'',
        couponId:'',
        startTime:'',
        endTime:'',
        checkBoxData: [],//多选框选择的值
				formLabelWidth:'200px',
				tableDataLoading:false,
				dialogFormVisible:false,
        dialogFormVisible1:false,
        dialogFormVisible2:false,
        dialogFormVisible3:false,
				tableData:[],
        shopData:[]
			}
		},

		methods: {
      // 通用券/商品券
      couponClick(val){
        if(val=1){
          this.goodsIds =''
          this.goodsImages = ''
          this.form.goodsIds =''
          this.form.goodsImages = ''
        }
      },
      // 刷新
      refresh(){
       this.dataSelect()
      },
			handleSizeChange(val) {
				this.size = val;
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.dataSelect()
			},
      handleSizeChange1(val) {
      	this.size = val;
      	this.shopSelect()
      },
      handleCurrentChange1(val) {
      	this.page = val;
      	this.shopSelect()
      },
      // 添加优惠券弹框
      addCoupon(){
        this.type = 1
        this.dialogFormVisible = true
      },
      // 添加优惠券
      couponNoticeTo(){
          if (this.couponName == '') {
              this.$notify({
                  title: '提示',
                  duration: 1800,
                  message: '请输入优惠券名称',
                  type: 'warning'
              });
              return
          }
          // if (this.type == 2 && this.goodsImages == '') {
          //     this.$notify({
          //         title: '提示',
          //         duration: 1800,
          //         message: '请选择商品',
          //         type: 'warning'
          //     });
          //     return
          // }
          // if (this.minMoney < this.lessMoney) {
          //     this.$notify({
          //         title: '提示',
          //         duration: 1800,
          //         message: '优惠券金额不能高于最低消费金额',
          //         type: 'warning'
          //     });
          //     return
          // }
          // if (this.minMoney == this.lessMoney) {
          //     this.$notify({
          //         title: '提示',
          //         duration: 1800,
          //         message: '优惠券金额不能高于最低消费金额',
          //         type: 'warning'
          //     });
          //     return
          // }
          this.$http({
            url: this.$http.adornUrl2('/selfCoupon/save'),
            method: 'post',
            data: this.$http.adornData({
            'couponName':this.couponName,
            'goodsIds':this.goodsIds,
            'goodsImages':this.goodsImages,
            'lessMoney':this.lessMoney,
            'minMoney':this.minMoney,
            'sort':this.sort,
            'status':this.status,
            'type':this.type,
            'validDay':this.validDay,
            })
          }).then(({data}) => {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.couponName = ''
                  this.goodsImages = ''
                  this.lessMoney = 0
                  this.validDay = 1
                  this.minMoney = 0
                  this.sort = 0
                  this.status = 1
                  this.dataSelect()
                }
              })
              this.dialogFormVisible = false
          })
      },
      // 修改优惠券
      shopUpdates(index,row){
         this.dialogFormVisible3 = true
         this.form.type = row.type
         this.form.couponId = row.couponId
         this.form.couponName = row.couponName
         this.form.lessMoney = row.lessMoney
         this.form.minMoney = row.minMoney
         this.form.sort = row.sort
         this.form.status = row.status
         this.form.validDay = row.validDay
         this.form.createTime = row.createTime
         this.form.goodsIds = row.goodsIds
         this.form.goodsImages = row.goodsImages
      },
      amendNoticeTo(){
          this.$http({
            url: this.$http.adornUrl2('/selfCoupon/update'),
            method: 'post',
            data: this.$http.adornData({
            'couponId':this.form.couponId,
            'couponName':this.form.couponName,
            'goodsIds':this.form.goodsIds,
            'goodsImages':this.form.goodsImages,
            'lessMoney':this.form.lessMoney,
            'minMoney':this.form.minMoney,
            'sort':this.form.sort,
            'status':this.form.status,
            'type':this.form.type,
            'validDay':this.form.validDay,
            'createTime':this.form.createTime,
            })
          }).then(({data}) => {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
              this.dialogFormVisible3 = false
          })
      },
      // 发布优惠券弹框
      discuss(index,row){
        this.dialogFormVisible2 = true
        this.couponId = row.couponId
        this.couponName1 = row.couponName
        this.goodsIds = row.goodsIds
        this.type = row.type
      },
      // 发布优惠券
      discussNoticeTo(){
        if (this.startTime == '') {
            this.$notify({
                title: '提示',
                duration: 1800,
                message: '请选择优惠券领取时间',
                type: 'warning'
            });
            return
        }
        if (this.endTime== '') {
            this.$notify({
                title: '提示',
                duration: 1800,
                message: '请选择优惠券结束时间',
                type: 'warning'
            });
            return
        }
        this.$http({
          url: this.$http.adornUrl2('/selfCouponIssue/save'),
          method: 'post',
          data: this.$http.adornData({
          'couponName':this.couponName1,
          'couponId':this.couponId,
          'startTime':this.startTime,
          'endTime':this.endTime,
          'issueNumber':this.issueNumber,
          'remainNumber':this.issueNumber,
          'isLimit':this.isLimit,
          'status':this.status,
          'type':this.type,
          'goodsIds':this.goodsIds
          })
        }).then(({data}) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.startTime = ''
                this.endTime = ''
                this.isLimit = 1
                this.status = 1
                this.issueNumber =''
                this.dataSelect()
              }
            })
            this.dialogFormVisible2 = false
        })
      },
			// 删除优惠券
			shopdeletes(row){
				this.$confirm(`确定删除此条信息?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$http({
				    url: this.$http.adornUrl2('/selfCoupon/delete'),
				    method: 'get',
				    params: this.$http.adornParams({
						'id':row.couponId
				    })
				  }).then(({data}) => {
            if(data&&data.status == 0){
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            }else{
              this.$message({
                message: data.msg,
                type: 'error',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            }
				  })
				}).catch(() => {})
			},
			//获取优惠券数据
			dataSelect () {
        let page = this.page-1
			  this.tableDataLoading = true
			  this.$http({
				url: this.$http.adornUrl2('/selfCoupon/list'),
				method: 'get',
				params: this.$http.adornParams({
          'page':page,
          'size':this.size
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.tableData = returnData
			  })
			},
      //搜索
      select(){
         this.shopSelect()
      },
      // 重置
      cleans(){
      	this.title = ''
      	this.shopSelect()
      },
      // 删除
      clear(index) {
      	this.imgs.splice(index, 1);
        this.ids.splice(index,1)
      },
      // 选择商品
      shopClick(){
        this.dialogFormVisible1 = true
        this.shopSelect()
      },
      // 获取商品数据
      shopSelect () {
        let page = this.page-1
        let status = 0
        this.title = ''
        this.tableDataLoading = true
        this.$http({
      	url: this.$http.adornUrl2('/goods/list'),
      	method: 'get',
      	params: this.$http.adornParams({
      		'page':page,
      		'size':this.size,
      		'title':this.title,
      		'type':this.typeId,
      		'status':status
      	})
        }).then(({data}) => {
      		this.tableDataLoading = false
      		let returnData = data.data;
      		this.shopData = returnData
        })
      },
      // 选择商品
       selectClick(index,row){
         console.log(row)
         this.$http({
           url: this.$http.adornUrl2('/goods/find'),
           method: 'get',
           params: this.$http.adornParams({
         	  'id':row.id
           })
         }).then(({data}) => {
         	this.dialogFormVisible1 = false
           let returnData = data.data;
           this.goodsIds = returnData.id
           this.goodsImages = returnData.coverImg
           this.form.goodsIds = returnData.id
           this.form.goodsImages = returnData.coverImg
         })
       }
		},
		mounted() {
			this.dataSelect()
		}
	  };
</script>

<style>

</style>
